<template>
  <div class="home-section" :style="{ padding: `${mbConfig}px` }">
    <!-- 标题 -->
    <div class="section-title" :style="{ color: titleColor, padding: '15px', textAlign: 'center', fontSize: '18px', fontWeight: 'bold' }">
      {{ title }}
      <span class="more" v-if="showMore">更多 &gt;</span>
    </div>
    
    <!-- 自定义Banner -->
    <div class="banner-container" :style="{ marginLeft: `${bannerLrConfig}px`, marginRight: `${bannerLrConfig}px` }">
      <div
        class="banner-bg"
        :style="{ background: `linear-gradient(180deg,${bannerBgColor[0].item} 0%,${bannerBgColor[1].item} 100%)` }"
        v-if="bannerIsShow.val"
      ></div>
      <div class="banner-content">
        <img :src="bannerImage" alt="Banner" v-if="bannerImage" class="banner-img"/>
        <div class="empty-banner" v-else>
          <span class="iconfont-diy icontupian"></span>
          <p>点击上传Banner图片</p>
        </div>
        <div class="banner-dots" v-if="bannerDotsShow">
          <div class="dot" :class="activeDot === i ? 'active' : ''" v-for="i in bannerDotCount" :key="i"></div>
        </div>
      </div>
    </div>
    
    <!-- 自定义Menu -->
    <div class="menu-container" :style="{ backgroundColor: menuBgColor[0].item }">
      <div class="menu-list" :class="menuDisplayStyle">
        <div class="menu-item" v-for="(item, index) in menuItems" :key="index">
          <div class="menu-icon" :class="menuStyle === '圆形' ? 'circle' : 'square'">
            <img :src="item.img"  v-if="item.img"/>
            <div class="empty-icon" v-else>
              <span class="iconfont-diy icontupian"></span>
            </div>
          </div>
          <p class="menu-title">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'home_section',
  cname: '首页组合区块',
  icon: 'icongroup',
  configName: 'c_home_section',
  type: 3,
  defaultName: 'homeSections',
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    }
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray']),
    // 提取Banner图片
    bannerImage() {
      const config = this.defaultArray[this.num]
      return config && config.bannerSwiperConfig && config.bannerSwiperConfig.list[0] ? config.bannerSwiperConfig.list[0].img : ''
    },
    // 提取Banner背景色
    bannerBgColor() {
      const config = this.defaultArray[this.num]
      return config && config.bannerBgColor && config.bannerBgColor.color ? config.bannerBgColor.color : [{ item: '#FFFFFF' }, { item: '#FFFFFF' }]
    },
    // 提取Banner显示背景色配置
    bannerIsShow() {
      const config = this.defaultArray[this.num]
      return config && config.bannerIsShow ? config.bannerIsShow : { val: true }
    },
    // 提取Banner左右边距
    bannerLrConfig() {
      const config = this.defaultArray[this.num]
      return config && config.bannerLrConfig && config.bannerLrConfig.val ? config.bannerLrConfig.val : 10
    },
    // 提取Banner dots配置
    bannerDotsShow() {
      return true // 简化实现，始终显示
    },
    bannerDotCount() {
      return 3 // 简化实现，固定3个点
    },
    activeDot() {
      return 0 // 简化实现，始终第一个激活
    },
    // 提取Menu项目
    menuItems() {
      const config = this.defaultArray[this.num]
      if (config && config.menuListConfig && config.menuListConfig.list) {
        return config.menuListConfig.list.map(item => ({
          img: item.img,
          title: item.info && item.info[0] ? item.info[0].value : '未命名'
        }))
      }
      return []
    },
    // 提取Menu样式
    menuStyle() {
      const config = this.defaultArray[this.num]
      if (config && config.menuStyle && config.menuStyle.list && config.menuStyle.list.length) {
        return config.menuStyle.list[0].val || '方形'
      }
      return '方形'
    },
    // 提取Menu背景色
    menuBgColor() {
      const config = this.defaultArray[this.num]
      return config && config.menuBgColor && config.menuBgColor.color ? config.menuBgColor.color : [{ item: '#fff' }]
    },
    // 提取Menu显示样式
    menuDisplayStyle() {
      return 'multi-row' // 简化实现，固定多行展示
    }
  },
  watch: {
    defaultArray: {
      handler(nVal) {
        // 配置变化时触发重渲染
      },
      deep: true
    },
    num: {
      handler(nVal) {
        // 组件编号变化时触发重渲染
      }
    }
  },
  data() {
    return {
      title: '热门活动',
      titleColor: '#333333',
      mbConfig: 0,
      showMore: false,
      // 默认配置
      defaultConfig: {
        name: 'home_section',
        timestamp: this.num,
        tabConfig: {
          title: '选择样式',
          tabVal: 0,
          type: 1,
          tabList: [
            {
              name: '标题',
              icon: 'icontitle',
              count: 1
            },
            {
              name: 'Banner',
              icon: 'icontupian',
              count: 2
            },
            {
              name: '菜单',
              icon: 'icongroup',
              count: 3
            }
          ]
        },
        title: '热门活动',
        titleConfig: {
          title: '标题文字',
          value: '热门活动',
          max: 10
        },
        titleColor: {
          title: '标题颜色',
          default: [{ item: '#333333' }],
          color: [{ item: '#333333' }]
        },
        showMore: {
          title: '显示更多按钮',
          val: false
        },
        mbConfig: {
          title: '页面间距',
          val: 0,
          min: 0,
          max: 50,
          unit: 'px'
        },
        // Banner配置
        bannerSwiperConfig: {
          title: '轮播图片',
          maxList: 10,
          list: [
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '今日推荐',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            }
          ]
        },
        bannerIsShow: {
          title: '是否显示背景色',
          val: true
        },
        bannerBgColor: {
          title: '背景颜色(渐变)',
          default: [{
            item: '#FFFFFF'
          }, {
            item: '#FFFFFF'
          }],
          color: [{
            item: '#FFFFFF'
          }, {
            item: '#FFFFFF'
          }]
        },
        bannerLrConfig: {
          title: '左右边距',
          val: 10,
          min: 0,
          max: 50,
          unit: 'px'
        },
        // Menu配置
        menuListConfig: {
          title: '导航图标',
          maxList: 100,
          list: [
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '今日推荐',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '热门榜单',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '限时优惠',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            }
          ]
        },
        menuStyle: {
          title: '图标样式',
          name: 'menuStyle',
          type: 1,
          list: [
            {
              val: '方形',
              icon: 'iconPic_square'
            },
            {
              val: '圆形',
              icon: 'icondayuanjiao'
            }
          ]
        },
        menuBgColor: {
          title: '背景颜色',
          name: 'bgColor',
          default: [{
            item: '#fff'
          }],
          color: [{
            item: '#fff'
          }]
        }
      }
    }
  },
  methods: {
    setConfig(data) {
      if (!data) return
      this.title = data.title || '热门活动'
      this.titleColor = data.titleColor && data.titleColor.color[0].item || '#333333'
      this.mbConfig = data.mbConfig && data.mbConfig.val || 0
      this.showMore = data.showMore && data.showMore.val || false
    }
  },
  mounted() {
    // 初始化配置
    if (!this.defaultArray[this.num]) {
      this.$store.commit('mobildConfig/INITCONFIG', {
        num: this.num,
        val: this.defaultConfig
      })
    } else {
      this.setConfig(this.defaultArray[this.num])
    }
  }
}

</script>

<style scoped>
.home-section {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.section-title {
  position: relative;
}

.more {
  position: absolute;
  right: 15px;
  font-size: 14px;
  color: #999;
  font-weight: normal;
}

/* Banner样式 */
.banner-container {
  margin-bottom: 15px;
  position: relative;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 8px;
}

.banner-content {
  position: relative;
  z-index: 2;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.empty-banner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.empty-banner .iconfont-diy {
  font-size: 30px;
  color: #ccc;
  margin-bottom: 10px;
}

.empty-banner p {
  color: #999;
  font-size: 14px;
}

.banner-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.banner-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
}

.banner-dots .dot.active {
  background-color: #fff;
  width: 24px;
  border-radius: 4px;
}

/* Menu样式 */
.menu-container {
  padding: 15px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.menu-item {
  flex: 1 0 calc(25% - 15px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  margin-bottom: 8px;
  overflow: hidden;
}

.menu-icon.square {
  border-radius: 8px;
}

.menu-icon.circle {
  border-radius: 50%;
}

.menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty-icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-icon .iconfont-diy {
  font-size: 24px;
  color: #ccc;
}

.menu-title {
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
</style>

<style scoped lang="scss">
.home-section {
  width: 100%;
  box-sizing: border-box;
  .section-title {
    margin: 0;
    padding: 15px 10px;
  }
  /* 确保子组件正确排列 */
  > * {
    width: 100%;
    display: block;
  }
}
</style>